<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="奖金计算">
                <CalBonus></CalBonus>
                <!-- <div style="height:600px;">
                    <div style="width:140px;float:left">
                        <div><el-button type="primary" style="margin-top:20px" @click="toShow1">业绩获取</el-button></div>
                        <div><el-button type="primary" style="margin-top:20px" @click="toShow2">月结计算</el-button></div>
                    </div>
                    <div style="float:left" v-show="show1">
                        <div style="margin-top:20px; font-size:18px;">当前月份：2018-07</div>
                        <div style="margin-top:20px; font-size:18px;">订单数据：2018-07-01~2018-07-31</div>
                        <div style="margin-top:20px; font-size:18px;">补单数据：2018-08-01~2018-08-03</div>
                        <div style="margin-top:20px; font-size:18px;">调差数据：2018-06-27~2018-07-26</div>
                        <el-button @click="dialogTableVisible1 = true">获取</el-button>
                    </div>
                    <div style="float:left" v-show="show2">
                        <el-table
                            :data="tableData1"
                            border
                            style="width: 100%">
                            <el-table-column
                            width="200"
                            prop="a1"
                            label="序号">
                            </el-table-column>
                            <el-table-column
                            width="200"
                            prop="a2"
                            label="运行时间">
                            </el-table-column>
                            <el-table-column
                            width="200"
                            label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="dialogTableVisible3 = true">查看结果</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button>运行计算</el-button>
                        <el-button @click="dialogTableVisible2 = true">最终确认</el-button>
                    </div>
                    <el-dialog title="业绩获取" :visible.sync="dialogTableVisible1">
                        <div style="margin-top:20px; font-size:18px;">订单记录：xxx</div>
                        <div style="margin-top:20px; font-size:18px;">PV总数：xxx</div>
                        <div style="margin-top:20px; font-size:18px;">补单数据：xxx</div>
                        <div style="margin-top:20px; font-size:18px;">PV总额：xxx</div>
                        <div style="margin-top:20px; font-size:18px;">调差（含跨月退货）：xxx条（201804：5条，201805:4条）</div>
                    </el-dialog>
                    <el-dialog title="计算记录" :visible.sync="dialogTableVisible2">
                        <el-table
                            :data="tableData1"
                            border
                            style="width: 100%">
                            <el-table-column
                            width="200"
                            prop="a1"
                            label="序号">
                            </el-table-column>
                            <el-table-column
                            width="200"
                            prop="a2"
                            label="运行时间">
                            </el-table-column>
                            <el-table-column
                            width="200"
                            label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="sureLast">最终确认</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-dialog>
                    <el-dialog title="第三次计算" :visible.sync="dialogTableVisible3">
                        <div style="margin-top:20px; font-size:18px;">时间：2018.08.06-20:00</div>
                        <div style="margin-top:20px; font-size:18px;">双金钻</div>
                        <div style="margin-top:20px; font-size:18px;">晋升报表</div>
                        <div style="margin-top:20px; font-size:18px;">降级报表</div>
                        <div style="margin-top:20px; font-size:18px;">职级总汇表</div>
                        <div style="margin-top:20px; font-size:18px;">预测晋升报表</div>
                    </el-dialog>
                </div> -->
                <!-- <el-table
                    :data="tableData1"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="a1"
                    label="日期">
                    </el-table-column>
                    <el-table-column
                    prop="a2"
                    label="姓名">
                    </el-table-column>
                    <el-table-column
                    prop="a3"
                    label="地址">
                    </el-table-column>
                </el-table> -->
            </el-tab-pane>
            <!-- <el-tab-pane label="业绩调整">角色管理</el-tab-pane> -->
            <el-tab-pane label="网络图">
                <networkTable></networkTable>
            </el-tab-pane>
            <el-tab-pane label="计酬表">
                <BnsTable></BnsTable>
            </el-tab-pane>
            <el-tab-pane label="报表">
                <ReportTable></ReportTable>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import ReportTable from './reportTable';
import BnsTable from './bnsTable';
import networkTable from './networkTable';
import CalBonus from './calBonus';
export default {
    data(){
        return {
            dialogTableVisible1:false,
            dialogTableVisible2:false,
            dialogTableVisible3:false,
            show1:false,
            show2:true,

            tableData1:[
                {
                    a1:1,
                    a2:'20180806-20:00'
                },
                {
                    a1:2,
                    a2:'20180811-06:00'
                },
                {
                    a1:3,
                    a2:'20180815-20:00'
                },
            ]
        }
    },
    methods:{
        toShow1(){
            this.show1 = true
            this.show2 = false
        },
        toShow2(){
            this.show1 = false
            this.show2 = true
        },
        sureLast() {
            this.$confirm('此操作将确认最终记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$message({
                type: 'success',
                message: '确认成功'
            });
            this.dialogTableVisible2 = false
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消确认'
            });          
            });
        }
    },
    components:{
        ReportTable,
        BnsTable,
        networkTable,
        CalBonus
    }
}
</script>
<style>
.bns_title{
    text-align: center;
    padding: 10px;
    font-size: 20px;
}
</style>


